<template lang="html">

  <div v-if=!isLogin class="headers">

    <div span="2" offset="22">
      <router-link to="/Login">
        <div class="header_menu">
          登录</div>
      </router-link>
    </div>

  </div>
  <div v-else class="headers">

    <div span="2" offset="22">

      <router-link :to="{path: '/userInfo', query:{ id: id }}" >
        <span class="header_menu">
          欢迎回来 <br>{{username}}</span>
      </router-link>

      <span class="out" @click="userout()">退出</span>
    </div>

  </div>
</template>.
<script>
  export default {
    data() {
      return {
        isLogin: false,
        username: '',
      }
    },
    created() {
      //    此时登录成功
      let token = localStorage.getItem('token')
      //    console.log(token)
      if (token) {
        this.isLogin = true
        this.username = localStorage.getItem('username')
        this.id = localStorage.getItem('_id')
        console.log(this.id);
      } else {
        console.log('用户登录失败');
        //      this.localStorage.setItem(data.body.data);
      }
    },
    methods: {
      userout:function(){

        window.localStorage.clear( )
        this.$router.push({
          path: 'Discover'
        })
        this.$router.go(0)
      }

    },
  }
</script>
<style lang="css" scoped>
  .headers {
    width: 100%;
    height: 30px;
    /* right: 500px; */
    top: 0;
    color: #000;
  }

  .header_menu {
    position: absolute;
    color: rgb(255, 255, 255, 0.6);
    right: 50px;
    top: 65px;
    font-size: 18px;
    width: 75px;
    cursor: pointer;
    text-align: left;
  }
  .admin{
    right:30px ;
    top: 120px;
    width: 100px;
  }
  .out{
    position: absolute;
    color: rgb(255, 255, 255, 0.6);
    right: -30px;
    top: 70px;
    font-size: 18px;
      cursor: pointer;
  }
</style>